<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>

    <link rel="stylesheet" type="text/css" href="/static/css/styles.css">
    <style type="text/css">
        body,td,th { font-family: "Source Sans Pro", sans-serif; }
        /* body { background-color: #2B2B2B; } */
    </style>
</head>
<body>

<div class="wrapper">

    <div class="container">
        <h1>Welcome</h1>
        <form class="form">
            <input id="userName" type="text" placeholder="用户名"/>
            <input id="password" type="password" placeholder="密码"/>
            <input type="text" value="在线人数：${onlineCount}" readonly="readonly"/>
            <button type="submit" id="login-button">登录</button>
        </form>
    </div>

    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

<script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    $('#login-button').click(function(event){
        //
        event.preventDefault();
        $('form').fadeOut(500);
        $('.wrapper').addClass('form-success');

        var userName = $("#userName").val();
        var password = $("#password").val();
        if(! userName || !password) {
            $('.wrapper').removeClass('form-success');
            $('form').fadeIn(1);
            $('.wrapper').addClass('form-failure');

            alert("账号或密码不用为空");
            return;
        }
        $.ajax({
            type: 'POST',
            url: '/login',
            data: {
                userName: userName,
                password: password
            },
            success: function (data) {
                console.log(data);
                if(data.code === 1) {
                    var role = data.result.role.name;
                    document.cookie = "userName=" + data.result.userName;
                    document.cookie = "role=" + role;

                    // 跳转到对应角色页面
                    window.location.href = 'index';
                }else if (data.code === 0) {
                    $('.wrapper').removeClass('form-success');
                    $('.wrapper').addClass('form-failure');
                    $('form').fadeIn(500);
                    alert(data.msg);
                }
            },
            dataType: 'json'
        });
    });
</script>


</body>
</html>